<script setup lang="ts">
import { shallowRef } from 'vue'
import Login from './Login.vue'
import Regist from './Regist.vue'

let currentPage: any = shallowRef(Login)
</script>

<template>
  <div class="w-full h-full login-container">
    <div class="img">&nbsp;</div>
    <div class="flex flex-column flex-center login-box">
      <h2 class="project-name">syt admin</h2>

      <transition name="vertical-fade" mode="out-in" appear>
        <component :is="currentPage" />
      </transition>

      <div class="self-align-end">
        <el-button v-show="currentPage == Regist" size="small" round @click="currentPage = Login">
          登录
        </el-button>
        <el-button v-show="currentPage == Login" size="small" round @click="currentPage = Regist">
          注册
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10rem;
  padding: 0 2rem;
  background: linear-gradient(var(--el-color-primary-light-9), var(--el-color-primary-light-3));
}
.project-name {
  color: transparent;
  background: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
  background-clip: text;
  -webkit-background-clip: text;
}
.login-box {
  width: 270px;
}
@media screen and (max-width: 500px) {
  .login-container {
    grid-template-columns: 1fr;
  }
  .img {
    display: none;
  }
  .login-box {
    width: unset;
  }
}
</style>
